<template>
  <div style="height: 100vh; display: flex; flex-direction: column">
    <div style="display: flex; flex-direction: row; width: 100vw">
      <div style="width: 10%" @click="closeWindow">
        <svg viewBox="-10 -20 104 104">
          <line
            x1="50"
            y1="30"
            x2="30"
            y2="50"
            style="stroke: black; stroke-width: 3"
          />
          <line
            x1="30"
            y1="50"
            x2="50"
            y2="70"
            style="stroke: black; stroke-width: 3"
          />
        </svg>
      </div>
      <Search style="width: 80%" v-model="searchInput" @search="doSearch()" />
    </div>

    <List
      v-model="loading"
      :finished="finished"
      class="searchListBody"
      ref="searchListBody"
      style="flex-grow: 1; overflow: auto"
      @load="loadNext()"
      finished-text="没有更多了"
      loading-text="数据正在努力加载中"
    >
      <!-- 一条信息 -->
      <div
        v-for="(item, index) in ajaxResult"
        :key="index"
        style="
          padding-left: 1em;
          padding-right: 1em;
          padding-top: 0.5em;
          text-align: left;
          padding-bottom: 1em;
        "
      >
        <div
          @click="playSong(item)"
          style="
            width: calc(80% - 1rem);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          "
        >
          {{ item.name }}
        </div>
        <div style="display: flex; justify-content: space-between">
          <div
            style="font-size: 0.7em; color: lightgray; flex-grow: 1"
            @click="playSong(item)"
          >
            <div>{{ item.ar[0].name }}</div>
            <div>{{ item.al.name }}</div>
          </div>
          <div>
            <svg
              viewBox="0 0 100 100"
              fill="lightgray"
              style="width: 1.5rem"
              @click="showMenu(item)"
            >
              <circle cx="43" cy="20" r="7" />
              <circle cx="43" cy="50" r="7" />
              <circle cx="43" cy="80" r="7" />
            </svg>
          </div>
        </div>
      </div>
    </List>

    <div style="height: 5vh"></div>
    <Popup
      v-model="v_showMenu"
      position="bottom"
      round
      :style="{ height: '30rem', overflow: 'hidden' }"
    >
      <div style="text-align: left" class="infoBox">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
          v-if="showMenu_data.name != undefined"
        >
          <div
            style="
              display: flex;
              align-items: center;
              flex-grow: 1;
              width: calc(1%);
            "
          >
            <div>
              <img
                :src="showMenu_data.al.picUrl"
                style="
                  height: 5rem;
                  width: 5rem;
                  border-radius: 0.5rem;
                  margin-right: 0.8rem;
                  overflow: hidden;
                  box-shadow: #bebebe 0px 0px 3px 0px;
                "
              />
            </div>
            <div class="songInfo">
              <div style="font-size: 1.2rem">歌曲:{{ showMenu_data.name }}</div>
              <div>歌手:{{ showMenu_data.ar[0].name }}</div>
              <div>{{ showMenu_data.al.name }}</div>
            </div>
          </div>
          <div
            style="white-space: nowrap; color: orange; padding: 0.2rem 0.5rem"
          >
            畅听音乐
          </div>
        </div>
        <div style="color: lightgray">
          <small>无需下载客户端畅听音乐</small>
        </div>
        <hr
          style="
            background: rgb(243 243 243);
            margin-left: -5rem;
            margin-right: -5rem;
            border: 0;
            height: 1px;
          "
          noshade
        />
        <div class="btn-group" @mousedown="btn_pressdown">
          <div class="btn" @click="add_toPlayList(true)">下一首播放</div>
          <div class="btn" @click="add_toPlayList(false)">添加到播放列表</div>
          <div class="btn">评论</div>
          <div class="btn">下载</div>
          <div class="btn">分享</div>
          <div class="btn" @click='v_showMenu=false'>取消</div>
        </div>
      </div>
    </Popup>
  </div>
</template>
<style>
.SearListPageBody {
  background: white;
  height: 100vh;
  width: 100vw;
  position: absolute;
  bottom: -100vh;
  transition: all 0.6s;
  display: flex;
  flex-direction: column;
}
.searchListBody > div:active {
  background: rgb(219, 221, 223);
}
.songInfo {
  flex-grow: 1;
  width: 1%;
}
.songInfo > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* :not(:first) */
.btn-group {
  margin-top: 1rem;
}
.btn-group > div {
  line-height: 3rem;
}
.infoBox {
  margin-top: 1rem;
}
.infoBox > div:not(:last-child) {
  padding: 0rem 1rem;
}
.infoBox > div:not(:first-child) > div {
  padding: 0rem 1rem;
}
/* .btn-group>div:not(:first-child){
  border-top:0.1px solid red;
} */
</style>
<style  scoped>
.btn,
.btn2 {
  position: relative;
  /* width: 150px;
  height: 60px; */
  /* background: #409eff; */
  outline: 0;
  border: none;
  /* padding: 12px 20px; */
  overflow: hidden;
  /* color: #fff; */
}
.btn::before,
.btn2::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: 0.2s;
  background: #aaa;
  opacity: 0;
}
.btn:active::before,
.btn2:active::before {
  opacity: 0.2;
}
.btn::after {
  content: "";
  display: block;
  position: absolute;
  width: 200%;
  height: 100%;
  left: var(--x, 0);
  top: var(--y, 0);
  background-image: radial-gradient(circle, #aaa 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: translate(-50%, -50%) scale(10);
  opacity: 0;
  transition: transform 0.8s, opacity 0.8s;
}
.btn:active::after {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.3;
  transition: 0s;
}
.btn2::after {
  content: "";
  display: block;
  position: absolute;
  background: rgb(255, 255, 255, 0.7);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: all 0.8s, opacity 0.8s;
}
.btn2:active::after {
  left: var(--l, 0);
  right: var(--r, 0);
  opacity: 0.3;
  transition: 0s;
}
</style>>
<script>
import { Search } from "vant";
import { Popup } from "vant";
import { List } from "vant";
import { Toast } from "vant";
export default {
  components: {
    Search,
    Popup,
    List,
  },
  props: {
    propData: Object,
  },

  data() {
    return {
      searchInput: "",
      ajaxResult: [],
      v_showMenu: false,
      showMenu_data: {},

      offset: 0,
      loading: false,
      finished: false,

      requstTime: 0,
    };
  },
  methods: {
    getNameById(id) {
      return this.$store.state.DataCacheMap.simpleData[id]["title"];
    },
    getSingerById(id) {
      return this.$store.state.DataCacheMap.simpleData[id]["singer"];
    },
    playSong(data) {
      let md = {
        headUrl: data["al"]["picUrl"],
        title: data["name"],
        id: data["id"],
        singer: data.ar[0].name,
        right: true,
      };
      console.log("点击播放歌曲啦", md);
      this.$store.dispatch("serviceSetPlayData", md);
      // console.log("投放id", id);
      // this.$store.dispatch("serviceSetPlayData", { id });
    },
    closeWindow() {
      // this.$refs.SearListPageMask.style = "background: rgba(0, 0, 0, 0);";
      // // this.$refs.PlayListPageBody.style = "";
      // this.$refs.SearListPageBody.style = "bottom:-50em";
      // setTimeout(() => {
      //   this.$refs.SearchListPage.style = "display:none";
      //   this.$destroy();
      //   console.log("已经销毁啦");
      // }, 500);
      this.$parent.closeWindow();
    },
    openWindow() {
      //   this.$refs.PlayListPage.style = "bottom:-0em";
      // this.$refs.SearListPageMask.style = "background: rgba(0, 0, 0, 0.6);";
      // // this.$refs.PlayListPageBody.style = "bottom: 0em;";
      // // this.$refs.PlayListPageMask.setAttribute(
      // //   "style",
      // //   "background: rgba(0, 0, 0, 0.6);"
      // // );
      // this.$refs.SearchListPage.style = "bottom:-0em";
      // this.$refs.SearListPageBody.style = "bottom:0em";
    },
    doSearch() {
      this.ajaxResult = [];
      this.offset = 0;
      this.finished = false;
      this.loadNext();
    },
    showMenu(data) {
      // console.log(data)
      this.v_showMenu = true;
      this.showMenu_data = data;
      // setTimeout(() => {
      //   (() => {
      //     const el = document.querySelector(".btn");
      //     if (el != null)
      //       el.addEventListener("mousedown", (e) => {
      //         const { left, top } = el.getBoundingClientRect();
      //         console.log(left, top);
      //         el.style = `--x:${e.clientX - left}px;--y:${e.clientY - top}px`;
      //       });

      //     const el2 = document.querySelector(".btn2");
      //     if (el2 != null)
      //       el2.addEventListener("mousedown", (e) => {
      //         const { left, right } = el2.getBoundingClientRect();
      //         el2.style = `--l:${e.clientX - left}px;--r:${
      //           right - e.clientX
      //         }px`;
      //       });
      //   })();
      // }, 100);
      console.log(this.showMenu_data);
    },
    loadNext() {
      this.loading = true;
      let t = new Date().getTime();
      if (t - this.requstTime < 1000) {
        return;
      }
      this.requstTime = t;

      // window.thae=this;
      this.$request(
        "get",
        "/cloudsearch?keywords=" +
          this.searchInput +
          "&offset=" +
          this.offset.toString()
      ).then((data) => {
        let f = () => {
          // console.log(data);
          console.log(data);
          this.loading = false;
          this.ajaxResult = this.ajaxResult.concat(data.result.songs);
          this.offset += data.result.songs.length;
          if (this.offset >= data.result.songCount) {
            this.finished = true;
          }
          // console.log("加载成功", this.offset, this.ajaxResult, this.loading);
        };

        if (new Date().getTime() - t < 1000) {
          let th = this;
          // console.log("延迟加载效果");
          setTimeout(() => {
            f.call(th);
          }, 1500);
        } else {
          f();
        }
      });
    },
    btn_pressdown(e) {
      let el = e.target;
      if (el == null) return;
      const { left, top } = el.getBoundingClientRect();
      el.style = `--x:${e.clientX - left}px;--y:${e.clientY - top}px`;
      // console.log(event)
    },
    add_toPlayList(insert = false) {
      this.$store.dispatch("serviceSetPlayData", {
        title: this.showMenu_data["name"],
        singer: this.showMenu_data["ar"][0]["name"],
        id: this.showMenu_data["id"],
        headUrl: this.showMenu_data["al"]["picUrl"],
        insert:insert,
      });
      Toast("已成功添加歌曲到播放列表");
      // console.log(this.showMenu_data)
    },
    // btn_mouseDown() {},
  },
  mounted() {
    // this.$refs.PlayListPage.style["bottom"] = 0;
    this.searchInput = this.propData["searchValue"];
    // let that = this;

    this.doSearch();

    // 加载特效按钮

    // console.log("mounted")
  },
};
</script>